<template>
  <!--size抽屉宽度（或高度）  default 378px 和 large 736px -->
  <a-drawer
      v-model:open="visible"
      ref="employeeDetailModalRef"
      class="edit-drawer modal-fixed-bottom"
      root-class-name="root-customer-drawer"
      width="800px"
      :closable="false"
      @close="onClose"
  >
    <div class="closeable" @click="onClose">{{ $t('self.closeButton') }}</div>
    <div class="modal-header">{{ $t('self.user.tips12') }}</div>

    <a-form :model="formState" :rules="formRules" :label-col="labelCol" :wrapper-col="wrapperCol"
            @finish="onSubmit"
    >
      <div class="ui-block-container">
        <div class="block-header-wrap">
          <div class="title">{{ $t('self.user.modal.col5') }}</div>
        </div>
        <div class="block-content-wrap">
          <a-form-item :label="$t('self.user.modal.col6')">
            {{ detail.userName }}
          </a-form-item>
          <a-form-item :label="$t('self.user.modal.col7')">
            {{ detail.mobile }}
          </a-form-item>
          <a-form-item :label="$t('self.userBind.tips8')">
            {{ detail.no }}
          </a-form-item>
        </div>

        <div class="block-header-wrap">
          <div class="title">{{ $t('self.user.modal.col8') }}</div>
        </div>
        <div class="block-content-wrap">
          <a-form-item :label="$t('self.userBind.tips17')">
            {{ detail.totalMoney }}
          </a-form-item>
<!--          <a-form-item :label="$t('self.user.modal.col11')" name="userName">-->
<!--            <a-input allow-clear v-model:value="formState.userName" placeholder="" />-->
<!--          </a-form-item>-->
<!--          <a-form-item :label="$t('self.user.modal.col12')" name="pwd">-->
<!--            <a-input allow-clear v-model:value="formState.pwd" type="password" placeholder="" />-->
<!--          </a-form-item>-->
          <a-form-item :label="$t('self.user.modal.col13')" name="money">
            <a-input allow-clear v-model:value="formState.money" placeholder="" />
          </a-form-item>
        </div>
      </div>
      <div class="base-flex base-rows base-align-items-center base-justify-content-center footer">
        <a-button type="primary" html-type="submit">{{ $t('self.submitButton') }}</a-button>
        <a-button class="base-ml10" @click="onClose">{{ $t('self.cancelButton') }}</a-button>
      </div>
    </a-form>
  </a-drawer>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { userStore } from '@/stores/userStore'
const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $T = proxy.$t
const $API = proxy.$API
const emit = defineEmits(['close','ok'])
const useUserStore = userStore()

const visible = ref(false)
// 模式，add新增，show查看，edit编辑
const mode = ref('add')
const labelCol = {
  style: {
    width: '200px',
  },
};
const wrapperCol = {
  span: 16,
};
const detail = ref({})
const formState = ref({
  id: null,
  userName: useUserStore.provider.name,
  pwd: '',
  money: '',
  type: 'card'
})

const formRules = ref({
  // userName: [{required: true,message: $T('self.pleaseInput') + $T('self.user.modal.col11'),trigger: 'change'}],
  // pwd: [{required: true,message: $T('self.pleaseInput') + $T('self.user.modal.col12'),trigger: 'change'}],
})

onMounted(() => {

})

const onSubmit = (values) => {
  // 修改
  const params = { ...formState.value }
  $API.backend.user.chargeMoney.post(params).then(res => {
    message.success($T('self.message.success'))
    onReset()
    visible.value = false
    emit('ok')
  }).catch(err => {
    message.error(err.msg);
  })
};

const onReset = () => {
  // 清空内容
  Object.assign(formState.value, {
    id: null,
    pwd: '',
    money: '',
  })
}

const onClose = () => {
  onReset()
  visible.value = false
  emit('close')
}

const show = (record) => {
  mode.value = 'show'
  visible.value = true
  detail.value = record
  formState.value.id = record.id
}

// 子组件中要通过defineExpose将方法暴露给父组件
defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.edit-drawer {
  position: relative;
  .closeable {
    @include closeable;
  }
}
</style>
